<template>
  <div id="userBox">
    <h3 id="user_title">员工管理</h3>
    <div class="blackLine"></div>
    <button class="addBtn" @click="toAddForm">新增员工</button>
    <el-input placeholder="请输入编号" class="findById" maxlength="19" v-model="searchParam.id"></el-input>
    <el-input placeholder="请输入姓名" class="findByName" maxlength="7" v-model="searchParam.name"></el-input>
    <el-input placeholder="请输入账号" class="findByAccount" maxlength="11" v-model="searchParam.account"></el-input>
    <button class="searchBtn" @click="findUser()">查找</button>
    <el-upload
      class="upload-demo uploadXlsx"
      action="http://localhost:8888/hwy/cater/user/importUser"
      :limit="1"
      :headers="headers"
      :accept="fileType"
      :on-success="handleFileSuccess">
      <el-button size="small" type="primary">点击上传</el-button>
      <div slot="tip" class="el-upload__tip">只能上传xlsx文件</div>
    </el-upload>
    <el-button type="primary" plain class="downLoad" @click="downUserXlsx">点击导出</el-button>

    <el-table
      class="user_table"
      :data="userData"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="190"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别"
        width="60"
        align="center">
      </el-table-column>
      <el-table-column
        label="照片"
        width="125">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img"
            fit="fill">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column
        prop="isRoot"
        label="权限"
        width="80"
        align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.isRoot === 0? 'warning':'success'">{{scope.row.isRoot==0? '管理人员':'普通人员'}}</el-tag>
          <el-switch
            v-model="scope.row.param.isRoot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="true"
            :inactive-value="false"
            :change="changeRoot(scope.row.id,scope.row.param.isRoot)"
            >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="stop"
        label="状态"
        width="80"
        align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.stop === 0? 'success':'danger'">{{scope.row.stop==0?'正常':'禁用'}}</el-tag>
          <el-switch
            v-model="scope.row.param.stop"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :change="changeStop(scope.row.id,scope.row.param.stop)"
            >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="入职时间"
        width="110"
        align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini" @click="editUser(scope.row.id)">编辑</el-button>
          <el-button
            size="mini"
            @click="detail(scope.row.id)">详情</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      id="pageCss"
      class="pageClass"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageParam.currentPage"
      :page-sizes="[5,4,3,2]"
      :page-size="200"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageParam.dataCount">
    </el-pagination>
    <!-- user详情页 -->
    <el-dialog
      title="用户详情"
      :visible.sync="detailUserVisible"
      width="60%"
      :before-close="handleClose"
      center>
      <el-descriptions>
        <el-descriptions-item label="用户编号">{{descriptionsData.id}}</el-descriptions-item>
        <el-descriptions-item label="用户账号">{{descriptionsData.account}}</el-descriptions-item>
        <el-descriptions-item label="用户密码">{{descriptionsData.password}}</el-descriptions-item>
        <el-descriptions-item label="用户姓名">{{descriptionsData.name}}</el-descriptions-item>
        <el-descriptions-item label="用户性别">{{descriptionsData.sex}}</el-descriptions-item>
        <el-descriptions-item label="用户权限">{{descriptionsData.isRoot==0?'管理人员':'普通人员'}}</el-descriptions-item>
        <el-descriptions-item label="用户状态">{{descriptionsData.stop==0?'正常':'禁用'}}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{descriptionsData.createTime}}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{descriptionsData.updateTime}}</el-descriptions-item>
        <el-descriptions-item label="创建者">{{descriptionsData.createUser}}</el-descriptions-item>
        <el-descriptions-item label="更新者">{{descriptionsData.updateUser}}</el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="detailUserVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// :change="changeStop(scope.row.id,scope.row.stop)"
// :change="changeRoot(scope.row.id,scope.row.isRoot)"
import router from '@/router';
export default {
  data() {
    return {
      r:true,
      detailUserVisible: false,
      fileType: '.xlsx',
      editId: '',
      userData: [
      ],
      pageParam: {
        //数据总数
        dataCount: 10,
        //当前页
        currentPage: 1,
        //每页条数
        onePageCount: 5
      },
      searchParam:{
        id: '',
        name: '',
        account: ''
      },
      Root:{},
      // 详情信息
      descriptionsData:{
        // phone:13333333
      }
    }
  },

  methods: {
    //用户详情查询
    detail(id){
      this.$axios.post("http://localhost:8888/hwy/cater/user/detailUser/"+id)
          .then((response) => {
                    // console.log(response)
                    this.descriptionsData = response.data.data
                    // console.log(this.descriptionsData)
                  })
                  .catch(function (error) {
                  console.log(error)
             });
      this.detailUserVisible = true
    },

    //用户详情框关闭
    handleClose(done) {
        done();
    },
    //删除用户
    deleteUser(id){
      this.$axios.post("http://localhost:8888/hwy/cater/user/deleteUser/"+id)
                  .then((response) => {
                    this.$message({
                        message: response.data.data,
                        type: 'success',
                      });
                      this.findUser();
                  })
                  .catch(function (error) {
                  console.log(error)
             });
    },
    //禁用开关，回调
    changeStop(id,stop){
      if (stop == true){
          stop = 0;
        }else{
          stop = 1;
        }
      this.$axios.post("http://localhost:8888/hwy/cater/user/changeStop/"+id+'/'+stop)
                  .then((response) => {
                    this.Root = this.$store.getters.getRoot;
                    if (this.Root.id === id){
                      // this.$store.commit('setRoot',root,id);
                      this.$store.commit('setRootStop',stop);
                      // console.log("vuex的Root.stop发生改变")
                      // console.log(this.Root.id +","+this.Root.stop)
                      // console.log("----------------------------")
                    }
                  })
    },
    //权限开关，回调
    //问题：存在高并发问题，请求过多，切换太快直接卡bug,权限切换数据库更新 ,elm-ui的switch开关组件自己回调的bug导致权限错乱
    //原因：刷新太快
    changeRoot(id,root){
        if (root == true){
          root = 0;
        }else{
          root = 1;
        }
        this.$axios.post("http://localhost:8888/hwy/cater/user/changeRoot/"+id+'/'+root)
                  .then((response) => {
                    // console.log(response)
                    this.Root = this.$store.getters.getRoot;
                    if (this.Root.id === id){
                      // this.$store.commit('setRoot',root,id);
                      this.$store.commit('setRoot',root);
                      // console.log("vuex的Root.isRoot发生改变")
                      // console.log(this.Root.id +","+this.Root.isRoot)
                    }
                  })
    },

    //下载user的xlsx
    downUserXlsx(){
      // this.$axios.get("http://localhost:8888/hwy/cater/user/exportUser")
      //   .then((response) => {
      window.open("http://localhost:8888/hwy/cater/user/exportUser",'_self');
        // })
    },
    //上传xlsx成功的回调函数
    handleFileSuccess(){
      this.$message({
        message: 'xlsx上传成功。',
        type: 'success',
      });
      this.findUser();
    },
    toAddForm(){
      router.push('/userAddFrom');
    },
    // 分页-----
    handleSizeChange(val) {
      this.pageParam.onePageCount = val;
      this.findUser();
    },
    handleCurrentChange(val) {
      this.pageParam.currentPage = val;
      this.findUser();
    },
    //分页查询user
    findUser(){
      this.$axios.post("http://localhost:8888/hwy/cater/user/userPage/"+this.pageParam.currentPage+"/"+this.pageParam.onePageCount,this.searchParam)
                  .then((response) => {
                    console.log(response)
                    this.userData = response.data.data.records;
                    this.pageParam.dataCount = response.data.data.total;
                    this.pageParam.currentPage = response.data.data.current;
                  })
    },
    //编辑用户
    editUser(id){
      //传递要编辑的用户id
      // this.$bus.$emit("editUserId",id);
      this.editId = id,
      router.push("/userAddFrom")
    }
  },
  //生命周期函数
  mounted(){
    //一进来就查看第1页的5条数据
    // this.findUser();
    // setTimeout(()=>{
      this.findUser(); 
    // },3000)
  },
  beforeDestroy(){
    this.$bus.$emit("editUserId", this.editId);
  },
  computed: {
      headers() {
          return {
              "Authorization": localStorage.getItem("token")
          }
      },
      // computedType(isRoot){
      //   return isRoot == 0? true:false; 
      // }
  }
}
</script>

<style scoped>
@import '@/assets/css/user/user.css';
</style>